<template>
  <div class="footer">
      <ul class="navList">
          <router-link class="navItem" v-for="(item, index) in items" :key="index" :to="item.push" tag="li" replace>
              <img class="icon iconSelect" :src="item.iconSelect">
              <img class="icon" :src="item.icon">
              <span>{{item.name}}</span>
          </router-link>
      </ul>
  </div>
</template>

<script>
export default {
    props: ['idx'],
    data() {
        return {
            items:[{
					cls:"home",
					name:"首页",
					push:"/home",
					icon:require("../assets/index-icon@3x.png"),
					iconSelect:require("../assets/index-icon-checked@3x.png")
				},
				{
					cls:"cart",
					name:"购物车",
					push:"/cart",
					icon:require("../assets/cart-icon@3x.png"),
					iconSelect:require("../assets/cart-icon-checked@3x.png")
				},
				{
					cla:"order",
					name:"订单",
					push:"/order",
					icon:require("../assets/cart-icon@3x.png"),
					iconSelect:require("../assets/cart-icon-checked@3x.png")
				},
				{
					cla:"my",
					name:"我的",
					push:"/my",
					icon:require("../assets/my-icon@3x.png"),
					iconSelect:require("../assets/my-icon@3x.png")
				}]
        }
    },
    methods: {
        navToPage() {

        }
    },
    mounted() {
        // this.currentRoute = this.$route.
        console.log(this.$route)
    },
    watch: {
        $route() {
            this.currentRoute = this.$route.fullPath
        }
    },
    mounted() {
        this.currentRoute = this.$route.fullPath
    }
}

</script>
<style lang="scss" scoped>
.footer {
    padding: 0 0.14rem;
    position: fixed;
    bottom: 0;
    width: 100%;
    box-sizing: border-box;
    background: rgba(255,255,255,0.90);
    box-shadow: inset 0 0 0 0 #E1E1E1;
    &::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        height: 1px;
        background: #e1e1e1;
        width: 100%;
        transform: scale(1, 0.5);
    }
    .navList {
        height: 0.49rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .navItem {
            width: 0.48rem;
            display: flex;
            flex-direction: column;
            align-items: center;
            font-size: 0.11rem;
            color: #666;
            .icon {
                width: 0.18rem;
                height: 0.18rem;
                margin-bottom: 0.04rem;
            }
            .iconSelect {
                display: none;
            }
        }
        .active {
            color: #dd3333;
            .icon {
                width: 0.2rem;
                height: 0.2rem;
                display: none;
            }
            .iconSelect {
                display: inline-block;
            }
        }
    }
}
</style>